import React, { useEffect } from 'react';
import Style from './CreateTable.module.css';
import Row from './ItemRow';
import Col from './ItemCol';
import '../../global/css/grid.scss';

export default function CreateTable(props) {
  let { pageWidth, pageHeight, peripheryColor } = props;
  // widthUnit   宽度单位 采用24栅格系统
  // unit  页面像素单位  支持  mm px em  (处理不确定打印纸张时使用)

  const computed = () => {
    // 宽高必传 如果有一个不传递 那么就会采用默认的A4大小  默认 A4 210mm×297mm
    // 仅支持px
    let pW = pageWidth || '210mm';
    // let pH = pageHeight || '297mm';
    let pH = pageHeight || 'auto';
    // 外围的边框  默认为 1px solid black
    let pC = peripheryColor || '1px solid black';
    return { width: pW, height: pH, border: pC };
  };
  // 删除多余线头
  const removeSuperfluousDyuLine = () => {
    const dom = document.querySelectorAll('.token');
    const result = group(dom);

    // eslint-disable-next-line no-unused-expressions
    // 取消最后一行的下边框
    result[Object.keys(result).reverse()[0]].forEach((v) => {
      v.style.borderBottom = 0;
    });

    // 取消每一行的最后一个元素的有边框  (有bug)
    // for (const key in result) {
    //   if (Object.hasOwnProperty.call(result, key)) {
    //     const element = result[key].reverse()[0];
    //     // element.style.borderRight = 0;
    //     element.classList.add(`borderRight`);
    //   }
    // }
  };

  // 分组
  // directives 方向 x相同或者y相同
  const group = (arr) => {
    let container = {};
    arr.forEach((v) => {
      if (!container[v.offsetTop]) {
        container[v.offsetTop] = [];
      }
      container[v.offsetTop].push(v);
    });
    return container;
  };

  useEffect(() => {
    removeSuperfluousDyuLine();
  }, []);

  // 补充边框架构
  return (
    <div style={computed()} className={`${Style.Table}`} id="paper">
      <Row layout={'inline'}>
        <Col span={19}>
          <Row>
            <Col span={4}>姓名</Col>
            <Col span={12}>王明</Col>
            <Col span={4}>民族</Col>
            <Col span={4}>汉</Col>
          </Row>

          <Row>
            <Col span={4}>学号</Col>
            <Col span={6}>1810170422</Col>
            <Col span={6}>出生年月</Col>
            <Col span={8}>1992年04月</Col>
          </Row>
          <Row>
            <Col span={4}>性别</Col>
            <Col span={3}>女</Col>
            <Col span={3}>文化程度</Col>
            <Col span={6}>大学专科</Col>
            <Col span={4}>入学批次</Col>
            <Col span={4}>18春</Col>
          </Row>

          <Row>
            <Col span={4}>政治面貌</Col>
            <Col span={3}>群众</Col>
            <Col span={3}>联系电话</Col>
            <Col span={14}>15295954951</Col>
          </Row>
        </Col>

        {/* colSpan 向下合并几列 */}
        <Col span={5} colSpan={4} addBorder={['bottom', '#000000']}>
          <img
            style={{ width: '80%' }}
            src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fb-ssl.duitang.com%2Fuploads%2Fitem%2F201611%2F08%2F20161108110532_SR4P8.thumb.700_0.jpeg&refer=http%3A%2F%2Fb-ssl.duitang.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1639209590&t=1ec94f0d805d9f17e6824f9acd9656f6"
            alt=""
            srcset=""
          />
        </Col>
      </Row>

      <Row>
        <Col span={19}>
          <Row>
            <Col span={4}>身份证号</Col>
            <Col span={20}>418749415113461956</Col>
          </Row>
        </Col>
        <Col addBorder={['bottom']} span={5}></Col>
      </Row>

      <Row>
        <Col span={19}>
          <Row>
            <Col span={4}>通讯地址</Col>
            <Col span={20}>河南省郑州市XXXXXX哈哈哈</Col>
          </Row>
        </Col>
        <Col addBorder={['bottom']} span={5}></Col>
      </Row>

      <Row>
        <Col span={19}>
          <Row>
            <Col span={4} colSpan={2}>
              报考志愿
            </Col>
            <Col span={20}>
              <Row>
                <Col span={12}>专业名称</Col>
                <Col span={12}>专业代码</Col>
              </Row>
              <Row>
                <Col span={12}>工商管理</Col>
                <Col span={12}>120201</Col>
              </Row>
            </Col>
          </Row>
        </Col>
        <Col span={5}>
          <Row layout={'vertical'}>
            <Col removeBorder={['right']}>学历层次</Col>
            <Col removeBorder={['right']}>专科升本科</Col>
          </Row>
        </Col>
      </Row>

      <Row>
        <Col span={24} removeBorder={['right']}>
          入学考试成绩
        </Col>
      </Row>
      <Row>
        <Col span={8}>大学英语</Col>
        <Col span={8}>大学英语</Col>
        <Col span={8} removeBorder={['right']}>
          大学英语
        </Col>
      </Row>
      <Row>
        <Col span={8}>140</Col>
        <Col span={8}>130</Col>
        <Col span={8} removeBorder={['right']}>
          270.0
        </Col>
      </Row>
    </div>
  );
}
